import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class UserListItemWidget extends StatefulWidget {
  // final SimpleChannelUser user;
  final VoidCallback? onPressed;
  final int index;

  const UserListItemWidget({
    Key? key,
    // required this.user,
    required this.index,
    this.onPressed,
  }) : super(key: key);

  @override
  State<UserListItemWidget> createState() => _UserListItemWidgetState();
}

class _UserListItemWidgetState extends State<UserListItemWidget> {
  bool isTapping = false;

  @override
  Widget build(BuildContext context) {
    Widget prefixWidget = Container();
    if (widget.index == 0) {
      prefixWidget = Image.asset(
        "assets/images/ic_top_one.png",
        width: 24,
        height: 19,
        fit: BoxFit.contain,
      );
    } else if (widget.index == 1) {
      prefixWidget = Image.asset(
        "assets/images/ic_top_two.png",
        width: 24,
        height: 19,
        fit: BoxFit.contain,
      );
    } else if (widget.index == 2) {
      prefixWidget = Image.asset(
        "assets/images/ic_top_three.png",
        width: 24,
        height: 19,
        fit: BoxFit.contain,
      );
    } else {
      prefixWidget = Text(
        "${widget.index + 1}",
        style: TextStyle(
            fontSize: 20,
            color: isTapping ? Colors.white : const Color(0xff666666),
            fontWeight: FontWeight.w600,
            height: 1),
      );
    }
    return CupertinoButton(
      onPressed: () {
        widget.onPressed?.call();
      },
      minSize: 0,
      padding: EdgeInsets.zero,
      child: Container(
        decoration: const BoxDecoration(
          color: Colors.white,
        ),
        padding: EdgeInsets.only(
            left: widget.index > 2 ? 22 : 18,
            right: widget.index > 2 ? 20 : 12,
            top: 20),
        height: 72,
        child: Row(
          children: [
            prefixWidget,
            const SizedBox(
              width: 20,
            ),
            // AvatarImage(
            //     url: widget.user.avatar,
            //     width: 50,
            //     height: 50,
            //     borderRadius: 25),
            const SizedBox(
              width: 10,
            ),
            Expanded(
              child: Column(
                  mainAxisSize: MainAxisSize.min,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const Row(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        Text(
                          "nickname",
                          style: TextStyle(
                              fontSize: 13,
                              color: Color(0xff333333),
                              fontWeight: FontWeight.w500,
                              height: 1),
                        ),
                        SizedBox(
                          width: 4,
                        ),
                        // Container(
                        //   decoration: BoxDecoration(
                        //     gradient: LinearGradient(colors: [
                        //       widget.user.gender == UserConstants.genderMan
                        //           ? const Color(0xff80a4ff)
                        //           : const Color(0xffff66b2),
                        //       widget.user.gender == UserConstants.genderMan
                        //           ? const Color(0xff3151ff)
                        //           : const Color(0xffff1974)
                        //     ]),
                        //     borderRadius: BorderRadius.circular(6),
                        //   ),
                        //   height: 10,
                        //   padding: const EdgeInsets.symmetric(horizontal: 4),
                        //   child: Row(
                        //     mainAxisSize: MainAxisSize.min,
                        //     children: [
                        //       Image.asset(
                        //         widget.user.gender == UserConstants.genderMan
                        //             ? "assets/images/ic_gender_man.png"
                        //             : "assets/images/ic_gender_woman.png",
                        //         width: 8,
                        //         height: 8,
                        //       ),
                        //       Text(
                        //         widget.user.age.toString(),
                        //         style: const TextStyle(
                        //             fontSize: 8,
                        //             color: Colors.white,
                        //             fontWeight: FontWeight.w400),
                        //       ),
                        //     ],
                        //   ),
                        // ),
                      ],
                    ),
                    const SizedBox(
                      height: 4.5,
                    ),

                    SizedBox(
                      height: 12,
                      width: 100,
                      child: Stack(
                        children: [
                          Align(
                            alignment: Alignment.centerLeft,
                            child: Padding(
                              padding: const EdgeInsets.only(
                                left: 3,
                              ),
                              child: Row(
                                crossAxisAlignment: CrossAxisAlignment.center,
                                children: [
                                  Container(
                                    decoration: BoxDecoration(
                                        gradient: const LinearGradient(colors: [
                                          Color(0xFFE67E87),
                                          Color(0xFFF53B4A)
                                        ]),
                                        borderRadius:
                                            BorderRadius.circular(20)),
                                    padding: const EdgeInsets.only(
                                        left: 9.5, right: 2.5),
                                    height: 10,
                                    alignment: Alignment.center,
                                    child: const Text(
                                      "vipLevel",
                                      style: TextStyle(
                                          fontSize: 8,
                                          fontWeight: FontWeight.w500,
                                          color: Colors.white,
                                          height: 1),
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ),
                          Align(
                            alignment: Alignment.centerLeft,
                            child: Image.asset(
                              "assets/images/ic_vip.png",
                              width: 12,
                              height: 12,
                              fit: BoxFit.contain,
                            ),
                          ),
                        ],
                      ),
                    ),
                    // Row(
                    //   mainAxisSize: MainAxisSize.min,
                    //   children: [
                    //     Container(
                    //       padding: EdgeInsets.only(
                    //           left: 5, right: 5, top: 2, bottom: 2),
                    //       decoration: BoxDecoration(
                    //         gradient: LinearGradient(colors: [
                    //           Color(0xffffc66d),
                    //           Color(0xfffa7c31),
                    //           Color(0xffff4400)
                    //         ]),
                    //         borderRadius: BorderRadius.circular(9),
                    //       ),
                    //       child: Text(
                    //         "V10",
                    //         style:
                    //         TextStyle(fontSize: 10, color: Colors.white),
                    //       ),
                    //     ),
                    //   ],
                    // )
                  ]),
            ),
            const Text(
              "contributionValue",
              style: TextStyle(
                  fontSize: 15,
                  fontWeight: FontWeight.w500,
                  color: Color(0xff333333)),
            ),
          ],
        ),
      ),
    );
  }
}
